<template>
  <div id="container" ref="container">
  </div>
  <Navigator />
</template>
<script setup lang="ts">
import { getProjectManager } from '@/scripts/getProjectManager';
import { nextTick, onBeforeUnmount, ref } from 'vue';
import { createVueDisposer, toVR } from "vue-xe2-plugin/dist-node/components/xe2/tools";
import Navigator from '@/components/common/Navigator.vue';
import { getUrlParam } from '@/scripts/utils';

const container = ref<HTMLDivElement>()
const objm = getProjectManager();
const d = createVueDisposer(onBeforeUnmount)
const switchEngine = objm.switchEngine

const domId = toVR<any>(d, [switchEngine, "domId"]);


nextTick(() => {
  if (!container.value) return;
  domId.value = container.value;
  const viewer = objm.createCesiumViewer(container.value);
  d.dispose(viewer.statusChanged.disposableOn(status => {
    if (status == 'Created') {
      const obj = getUrlParam();
      // @ts-ignore
      if (!(obj.hasOwnProperty("cameraInfo")) || !obj.cameraInfo) return;
      // @ts-ignore
      const cameraInfo = JSON.parse(obj.cameraInfo as string)
      viewer.flyIn(cameraInfo.position, cameraInfo.rotation, 2)
    }
  }))

})
</script>
<style scoped>
#container {
  width: 100%;
  height: 100%;
  background-color: #64927370;
}
</style>
